<template>
  <div class="product-detail" :style="{ height: `${bodyHeight}px` }">
    <div class="header" :style="{ top: `${getSafeTop()}px`, height: `${getCapsuleBarHeight()}px`, }">
      <div class="back-icon">
        <u-icon  name="arrow-left" color="#fff" size="20" bold @click="goBack"></u-icon>
      </div>
    </div>
    <div class="img-wrapper">
        <ImageSwiper
          :list="productInfo.imgList || []"
          :height="bodyHeight"
        ></ImageSwiper>
        <!-- <div class="appoint" @click="toAppoint">预约</div> -->
      </div>
      <div class="info-wrapper">
        <div class="name">{{ productInfo.name }}</div>
        <div class="price">
          <!-- <span class="unit">{{ orderType === "1" ? "￥" : "积分" }}</span>
          <span class="num">{{ productInfo.price }}</span> -->
          <span>预约询价</span>
        </div>
        <div class="sku-wrapper">
          <div class="sku">
            <span class="label">商品库存：</span>
            <span class="value">{{ productInfo.count }}</span>
          </div>
          <div class="sepa"></div>
          <div class="tag">
            <span class="label">商品标签：</span>
            <span class="value">
              <span
                v-for="(item, index) in productInfo.labelList"
                :key="item + index"
                class="tag-item"
                >{{ item }}</span
              >
            </span>
          </div>
        </div>
        <div class="detail">
          <div class="label">商品描述</div>
          <div class="description">
            <rich-text :nodes="productInfo.description"></rich-text>
          </div>
        </div>
      </div>
      <div :class="['btns', Number(orderType) === 2 ? 'jifen' : '']"  :style="{ marginBottom: `${getSafeBottom()}px` }">
        <div v-if="Number(orderType) === 2" class="btn" @click="goto">立即下单</div>
        <div class="btn" @click="toAppoint">预约</div>
      </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "@/hooks/useRouter";
import PageContainer from "@/components/PageContainer/index.vue";
import { getProductDetail, getPointProductDetail } from "@/api/product";
import ImageSwiper from "@/components/ImageSwiper/index";
import { isAuth } from "@/hooks/useLogin";
import { addActiveList } from '@/api'
import {useSystemInfo} from '@/hooks/useSystemInfo';
const pages = getCurrentPages();

const width = uni.upx2px(750);
// const height = uni.upx2px(800);
const height = ref(0)
const bodyHeight = ref(0)
const {getSafeBottom, getSafeTop, getCapsuleBarHeight} = useSystemInfo();

const router = useRouter();

const productInfo = ref({
  name: "",
  price: "",
  count: 0,
  labelList: [],
  description: "",
  imgList: null,
});

const productId = ref("");
const orderType = ref("1");
const initProductInfo = () => {
  const apiFn =
    orderType.value === "2" ? getPointProductDetail : getProductDetail;
  apiFn(productId.value).then((res) => {
    productInfo.value = {
      name: res.name,
      price: orderType.value === "2" ? res.pointPrice : res.price,
      count: res.stock,
      description: res.remark || "",
      imgList: res.imageList || null,
      labelList: res.label ? res.label.split(",") : [],
    };
  });
};

const onShareAppMessage = () => {
  return {
    title: productInfo.value.name,
    path: pages?.[pages.length - 1].route,
    desc: productInfo.value.description
  }
}

const goBack = () => {
	router.back();
}

onMounted(() => {
  const queryData = router.getPageQuery();
  productId.value = queryData.id;
  orderType.value = queryData.type;
  initProductInfo();

  uni.getSystemInfo({
    success(res) {
      console.log('页面属性------', res.windowHeight)
      bodyHeight.value = res.windowHeight
    }
  })
});

const goto = () => {
  if (!isAuth()) return;
  router.push({
    path: `/pages/confirmOrder/index`,
    query: {
      id: productId.value,
      orderType: orderType.value,
    },
  });
};

const toAppoint = () => {
  uni.showModal({
    title: '提示',
    content: `请确认，是否预约到店咨询商品【${productInfo.value.name}】`,
    success: function (res) {
      if (res.confirm) {
        router.push({
          path: `/pages/reserveInfo/index`,
          query: {
            type: 2,
            activeId: productId.value,
          },
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}
</script>

<style lang="less" scoped>
.product-detail {
  overflow-y: auto;

  .header {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
  }
  .search-module {
    padding: 0 24px;
  }
  .cover {
    width: 100%;
    height: 400px;
  }
  .img-wrapper {
    position: relative;
    height: 100%;
    .appoint {
      position: absolute;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);
      font-size: 14px;
      color: #fff;
      padding: 4px 8px;
    }
  }
  .info-wrapper {
    padding: 0 20px;
    padding-bottom: 70px;
  }
  .name {
    margin: 16px 0;
    padding: 0 30px;
    color: #282828;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
  }
  .price {
    text-align: center;
    color: #4f3931;
    .num {
      font-size: 28px;
    }
  }
  .sku-wrapper {
    margin: 16px 0;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    height: 36px;
    font-size: 12px;
    display: flex;
    align-items: center;
    .label {
      color: #939393;
    }
    .tag-item {
      border: 1px solid #282828;
      padding: 0px 6px;
      border-radius: 2px;
      margin-left: 8px;
    }
    .sepa {
      width: 1px;
      background: #cecece;
      height: 20px;
      margin: 0 12px;
    }
  }
  .detail {
    .label {
      font-size: 14px;
      font-weight: bold;
      color: #272727;
      margin-bottom: 16px;
    }
    .description {
      font-size: 12px;
      color: #939393;
    }
  }
  .btns {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 340px;
    height: 46px;
    margin: auto;
    .btn {
      // position: fixed;
      width: 340px;
      height: 46px;
      // left: 0;
      // right: 0;
      // bottom: 20px;
      background-color: #282828;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #282828;
    }

    &.jifen {
      .btn {
        &:last-child {
          width: 120px;
          background: #fff;
          color: #282828;
        }
      }
    }
  }
}
</style>
